﻿<local:MyWindow xmlns:ms="http://namespaces.mindscape.co.nz/wpf"  x:Class="MercuryFE.Simple"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wpfspark="clr-namespace:WPFSpark;assembly=WPFSpark"
    Title="MercuryFE" 
    xmlns:local="clr-namespace:MercuryFE"
    
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    Height="400" Width="400"
                Cursor="None"
        
>
    <!--xmlns:f="clr-namespace:SStuff.FlowControls;assembly=SStuff.FlowControls"-->


    <Window.Resources>

        <!-- Number of 'icons' across the page - this determines size of items -->
        <sys:Int32 x:Key="ListViewItemsPerRow">5</sys:Int32>
        
        
        <local:FontSizeConverter x:Key="fontSizeConverter" />
        <local:IsNullConverter x:Key="isNullConverter"/>


      


        <DataTemplate x:Key="MenuItemDataTemplate">
                <TextBlock Text="{Binding Path=Name}"  >
                    <TextBlock.Effect>
                            <DropShadowEffect Color="Black" BlurRadius="10"/>
                    </TextBlock.Effect>
                </TextBlock>
        </DataTemplate>

        <DataTemplate x:Key="PopupMenuItemTemplate">
            <TextBlock Text="{Binding}" Margin="1">
                    <TextBlock.Effect>
                            <DropShadowEffect Color="Black" BlurRadius="10"/>
                    </TextBlock.Effect>
            </TextBlock>
        </DataTemplate>

        <Style x:Key="MenuItemContainerStyle" TargetType="{x:Type ListBoxItem}" ><!--TargetType="{x:Type UIElement}"-->
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=15}" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Yellow"/>
                </Trigger>
            </Style.Triggers>

            <Style.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
            </Style.Resources>
        </Style>

        <Style x:Key="PopupMenuItemContainerStyle" TargetType="{x:Type ListBoxItem}" >
            <!--TargetType="{x:Type UIElement}"-->
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="{Binding ElementName=canv, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=30}" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Yellow"/>
                </Trigger>
            </Style.Triggers>

            <Style.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
            </Style.Resources>
        </Style>



        <Style x:Key="LargeTextStyle">
            <Setter Property="Control.FontFamily" Value="Calibri" />
            <Setter Property="Control.FontSize" Value="35" />
            <Setter Property="Control.FontWeight" Value="Bold" />
            <Setter Property="Control.Foreground" Value="White" />
            <Setter Property="Control.Height" Value="100" />
            <Setter Property="Control.HorizontalAlignment" Value="Center" />
            <Setter Property="Control.VerticalAlignment" Value="Center" />
            <Setter Property="Control.Margin" Value="0,0,0,0" />
            <Setter Property="Control.Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Black" BlurRadius="10"/>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="MediumTextStyle">
            <Setter Property="Control.FontFamily" Value="Calibri" />
            <Setter Property="Control.FontSize" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=40}" />
            <Setter Property="Control.FontWeight" Value="Bold" />
            <Setter Property="Control.Foreground" Value="White" />
            <Setter Property="Control.HorizontalAlignment" Value="Left" />
            <Setter Property="Control.VerticalAlignment" Value="Center" />
            <Setter Property="Control.Margin" Value="0,0,0,0" />
            <Setter Property="Control.Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Black" BlurRadius="10"/>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ItemTextStyle" TargetType="{x:Type TextBlock}" >
            <Setter Property="FontFamily" Value="Calibri" />
            <Setter Property="FontSize" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=10}" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="TextAlignment" Value="Center" />
            <Setter Property="Margin" Value="0,0,0,0" />
            <Setter Property="TextWrapping" Value="Wrap" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Black" BlurRadius="10"/>
                </Setter.Value>
            </Setter>
        </Style>


        <Style x:Key="MessageTextStyle">
            <!--<Setter Property="TextBlock.FontSize" Value="{Binding ElementName=canv, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=30}" />-->

            <Setter Property="TextBlock.FontSize" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=30}" />

            <Setter Property="TextBlock.Foreground" Value="White" />
            <Setter Property="TextBlock.Background" Value="Transparent" />
            <Setter Property="TextBlock.Margin" Value="10" />
            <Setter Property="TextBlock.Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Gray" BlurRadius="10"/>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="TrackInfoTextStyle">
            <!--<Setter Property="TextBlock.FontSize" Value="{Binding ElementName=canv, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=30}" />-->

            <Setter Property="TextBlock.FontSize" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Canvas}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=50}" />

            <Setter Property="TextBlock.Foreground" Value="White" />
            <Setter Property="TextBlock.Background" Value="Transparent" />
            <Setter Property="TextBlock.Margin" Value="1" />
            <Setter Property="TextBlock.Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Gray" BlurRadius="10"/>
                </Setter.Value>
            </Setter>
        </Style>

        <!--Used to fade in and out the track info for the music beginning to play-->
        <Storyboard x:Key="fadeIn">
            <DoubleAnimation Storyboard.TargetName="TrackInfoBackground" Storyboard.TargetProperty="Opacity" 
                             From="0" To="1" AutoReverse="True" Duration="0:0:3" />
            
        </Storyboard>


        
        <!--Game Details related-->
        <ControlTemplate x:Key="FlowDocumentTemplate" TargetType="{x:Type FlowDocumentPageViewer}">
            <Border
                                      BorderThickness="{TemplateBinding Border.BorderThickness}"
                                      BorderBrush="{TemplateBinding Border.BorderBrush}"
                                      Margin="{TemplateBinding Control.Padding}"
                                      HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
                                      x:Uid="Border_47">
                <AdornerDecorator
                                                ClipToBounds="True"
                                                x:Uid="AdornerDecorator_1">
                    <DocumentPageView
                                                          DocumentPaginator="{x:Null}"
                                                          PageNumber="0"
                                                          KeyboardNavigation.TabIndex="1"
                                                          KeyboardNavigation.IsTabStop="False"
                                                          KeyboardNavigation.TabNavigation="Local"
                                                          x:Uid="DocumentPageView_1"
                                                          DocumentViewerBase.IsMasterPage="True" />
                </AdornerDecorator>
            </Border>

        </ControlTemplate>

        <DataTemplate x:Key="dtDetails">

            <DockPanel
                Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}}" 
                Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}}"
                 Background="Transparent">

                <FlowDocumentPageViewer  Background="Transparent" Document="{Binding}" Template="{StaticResource FlowDocumentTemplate}"   />

            </DockPanel>

        </DataTemplate>

        <ItemsPanelTemplate x:Key="vDetails">
            <StackPanel  Orientation="Horizontal" IsItemsHost="True" Background="Transparent" />
        </ItemsPanelTemplate>

        <Style x:Key="GameDetailsContainerStyle" TargetType="{x:Type ListBoxItem}">
            <!--<Setter Property="FontSize" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=40}" />-->
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontFamily" Value="Consolas"/>
            <Style.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White" />
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
            </Style.Resources>
        </Style>

        <Style x:Key="FlowDocumentNormal" TargetType="{x:Type FlowDocument}">
            <Setter Property="FontSize" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=40}" />
            <Setter Property="ColumnWidth" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualWidth}" />
            <Setter Property="PageWidth" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualWidth}" />
            <Setter Property="IsColumnWidthFlexible" Value="True"/>
        </Style>

        <Style x:Key="FlowDocumentSplit" TargetType="{x:Type FlowDocument}">
            <Setter Property="FontSize" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=40}" />
            <Setter Property="ColumnWidth" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualWidth, Converter={StaticResource fontSizeConverter}, ConverterParameter=2.2}" />
            <Setter Property="PageWidth" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualWidth}" />
            <Setter Property="IsColumnWidthFlexible" Value="False"/>
        </Style>




        <Style TargetType="{x:Type Image}">
            <Setter Property="Height" Value="{Binding ElementName=Viewer, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=42}" />
        </Style>
        
        
        
        
        <!-- ***********************************GAME SELECTION RELATED *********************************-->
        <Style x:Key="ListViewStyle"
         TargetType="{x:Type ListView}" BasedOn="{StaticResource {x:Type ListBox}}">
            <!--ItemHeight="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Canvas}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter={StaticResource ListViewItemsPerRow}}"-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border Name="bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                  Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}">
                            <ScrollViewer Margin="{TemplateBinding Padding}" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" >


                                <WrapPanel   
                                    ItemWidth="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Canvas}}, Path=ActualWidth, Converter={StaticResource fontSizeConverter}, ConverterParameter={StaticResource ListViewItemsPerRow}}" 
                                    
                                    IsItemsHost="True"
                                          
                         Width="{Binding ActualWidth,RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}">
                                </WrapPanel>


                                <!-- 
                                        <wpfspark:FluidWrapPanel HorizontalAlignment="Stretch"
                                 ClipToBounds="False"
                                 x:Name="fluidWrapPanel"
                                 VerticalAlignment="Stretch"
                                 Background="Transparent"
                                 ItemHeight="250"
                                 ItemWidth="250"
                                 IsComposing="True"
                                 Orientation="Horizontal"
                                 DragOpacity="0.75"
                                 DragScale="1.9">
            <wpfspark:FluidWrapPanel.ElementEasing>
                <BackEase EasingMode="EaseOut"
                          Amplitude="0.35"></BackEase>
            </wpfspark:FluidWrapPanel.ElementEasing>
            <wpfspark:FluidWrapPanel.DragEasing>
                <BackEase EasingMode="EaseOut"
                          Amplitude="0.65"></BackEase>
            </wpfspark:FluidWrapPanel.DragEasing>
        </wpfspark:FluidWrapPanel>
                                -->


<!--                                <wpfspark:FluidWrapPanel   
                                    
                                    ItemHeight="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Canvas}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter={StaticResource ListViewItemsPerRow}}"

                                    ItemWidth="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Canvas}}, Path=ActualWidth, Converter={StaticResource fontSizeConverter}, ConverterParameter={StaticResource ListViewItemsPerRow}}" 
                                 IsComposing="True"
                                 Orientation="Horizontal"
                                    
                                    IsItemsHost="True"
                         Height="{Binding ActualHeight,RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"                 
                         Width="{Binding ActualWidth,RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
>
                                    <wpfspark:FluidWrapPanel.ElementEasing>
                                        <BackEase EasingMode="EaseOut"
                          Amplitude="0.35"></BackEase>
                                    </wpfspark:FluidWrapPanel.ElementEasing>
                                    <wpfspark:FluidWrapPanel.DragEasing>
                                        <BackEase EasingMode="EaseOut"
                          Amplitude="0.65"></BackEase>
                                    </wpfspark:FluidWrapPanel.DragEasing>
                                </wpfspark:FluidWrapPanel>-->
                                
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key="ItemTemplate">
            <Viewbox Stretch="Uniform" >
                    <Grid Background="Black" Width="400" Height="400">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="3*"/>
                            <RowDefinition Height="1*" />
                        </Grid.RowDefinitions>

                        <Viewbox Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center">
                            <Border  Margin="10" CornerRadius="15" Background="White" >
                                <Image Source="{Binding Path=Image}"/>
                            </Border>
                        </Viewbox>
                        <!--<Viewbox Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center">-->
                        <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Path=Name}" Style="{StaticResource ItemTextStyle}" Foreground="White"  />
                        <!--</Viewbox>-->
                    </Grid>
            </Viewbox>
        </DataTemplate>

        <DataTemplate x:Key="ItemTemplateSelected">
            <Viewbox Stretch="Uniform" >
                <Border  Margin="10" CornerRadius="15" Background="LightGray" >
                    <Grid Background="Transparent" Width="400" Height="400">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="3*"/>
                            <RowDefinition Height="1*" />
                        </Grid.RowDefinitions>

                        <Viewbox Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center">
                            <Border BorderBrush="Black" BorderThickness="3"  Margin="10" CornerRadius="15" Background="White" >
                                <Image Source="{Binding Path=Image}"/>
                            </Border>
                        </Viewbox>
                        
                        <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Path=Name}"  Foreground="Black" Style="{StaticResource ItemTextStyle}" />
                        
                    </Grid>
                </Border>
            </Viewbox>
                
        </DataTemplate>

        <DataTemplate x:Key="ItemTemplateSelectedVideo">
            <Viewbox Stretch="Uniform">
                <Border  Margin="10" CornerRadius="15" Background="LightGray" >
                    <Grid Background="Transparent" Width="400" Height="400">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="3*"/>
                            <RowDefinition Height="1*" />
                        </Grid.RowDefinitions>

                        <Viewbox  Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" >
                            <Border BorderBrush="Black" BorderThickness="3"    Margin="10" CornerRadius="15" Background="White" >
                                <MediaElement Name="myMediaElement" >
                                    <MediaElement.Triggers>
                                        <EventTrigger RoutedEvent="MediaElement.Loaded">
                                            <EventTrigger.Actions>
                                                <BeginStoryboard>
                                                    <Storyboard>

                                                        <!-- The MediaTimeline has a RepeatBehavior="Forever" which makes the media play
											 over and over indefinitely.-->
                                                        <MediaTimeline Source="{Binding Path=Video}" Storyboard.TargetName="myMediaElement"  RepeatBehavior="Forever" />

                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger.Actions>
                                        </EventTrigger>
                                    </MediaElement.Triggers>
                                </MediaElement>
                            </Border>
                        </Viewbox>
                        
                           <TextBlock  Grid.Row="1" Grid.Column="0" Text="{Binding Path=Name}"  Style="{StaticResource ItemTextStyle}" Foreground="Black" />
                        

                    </Grid>
                </Border>
            </Viewbox>
        </DataTemplate>

        <Style x:Key="ListViewItemStyle"
         TargetType='{x:Type ListViewItem}' BasedOn='{StaticResource {x:Type ListBoxItem}}'>
            <Setter Property='Padding' Value='3'/>
            <Setter Property='Margin' Value='5'/>
            <Setter Property='HorizontalContentAlignment' Value='Center'/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/> <!-- stops the dotted line around items -->
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Background" Value="Transparent" />
            
            <!-- Default template for items -->
            <Setter Property="ContentTemplate" Value="{StaticResource ItemTemplate}" />
            
            
            <Style.Triggers>
                <!-- Play movie if available for active selection and window -->
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <!-- Only trigger when there is a video file and it is selected, and the window is active -->
                        <Condition Binding="{Binding Path=Video, Converter={StaticResource isNullConverter}}" Value="False"/>
                        <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=(ListViewItem.IsSelected)}" Value="True" />
                        <Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MyWindow}}, Path=IsActive}" Value="True" />
                     </MultiDataTrigger.Conditions>
                    <Setter Property="ContentTemplate" Value="{StaticResource ItemTemplateSelectedVideo}" />
                </MultiDataTrigger>


                <!-- Show template for selected item (with no actual movie) -->
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <!-- Only trigger when there is NO video file and it is selected, and the window is active -->
                        <Condition Binding="{Binding Path=Video, Converter={StaticResource isNullConverter}}" Value="True"/>
                        <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=(ListViewItem.IsSelected)}" Value="True" />
                        <Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MyWindow}}, Path=IsActive}" Value="True" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="ContentTemplate" Value="{StaticResource ItemTemplateSelected}" />
                </MultiDataTrigger>
            </Style.Triggers>


            <Style.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
            </Style.Resources>



        </Style>
        <!-- *********************************************************************-->
        
        
        
        
        
    </Window.Resources>

    <Canvas x:Name="canv" Background="Black">

        
        <!--GAME DETAILS AND MENU-->
        <Grid  Background="Transparent" x:Name="mainGrid" Canvas.ZIndex="2" 
              Width="{Binding ElementName=canv, Path=ActualWidth}" Height="{Binding ElementName=canv, Path=ActualHeight}">
            <Grid.RowDefinitions>
                <RowDefinition x:Name="mainGridRow0" Height="1*" ></RowDefinition>
                <RowDefinition Height="4*"></RowDefinition>
                <RowDefinition Height="1*"></RowDefinition>
                <RowDefinition Height="1*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <!--Menu Path-->
            <Viewbox Grid.Row="0" Grid.ColumnSpan="3" x:Name="vbPathCrumb">
                <TextBlock  Name="tbPathCrumb" Style="{StaticResource LargeTextStyle}" Text="" />
            </Viewbox>


            <!--
            ***********************************************************************************************************
                    Game Selection  
            ***********************************************************************************************************
            
            
            -->

            <ListView x:Name="lvMenu" Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="2" 
                      Background="Transparent" BorderBrush="Transparent" 
                      Style="{StaticResource ListViewStyle}"
                     ItemContainerStyle="{StaticResource ListViewItemStyle}"
                    />







            <Viewbox x:Name="vbMenuItemName" Visibility="Collapsed" Grid.Row="2" Grid.ColumnSpan="3">
                <TextBlock x:Name="tbMenuItemName"  Style="{StaticResource LargeTextStyle}" Text="" />
            </Viewbox>


            <!--Played stats-->
            <!--<Viewbox Grid.Row="3" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center">-->
                <StackPanel x:Name="bPlayStats" Grid.Row="3" Grid.Column="0" Orientation="Vertical" VerticalAlignment="Center">
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <Label Content="Last Played: " Style="{StaticResource MediumTextStyle}" />
                        <TextBlock x:Name="tbLastPlayed" Style="{StaticResource MediumTextStyle}" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <Label Content="Total Played: " Style="{StaticResource MediumTextStyle}" />
                        <TextBlock x:Name="tbTotalPlayed" Style="{StaticResource MediumTextStyle}" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <Label Content="Number of times Played: " Style="{StaticResource MediumTextStyle}" />
                        <TextBlock x:Name="tbNumberPlayed" Style="{StaticResource MediumTextStyle}" />
                    </StackPanel>
                </StackPanel>
            <!--</Viewbox>-->


            <!--number of players (mame)-->
            <Grid x:Name="gNumPlayers" Grid.Row="3" Grid.Column="2" Visibility="Visible"  HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                </Grid.RowDefinitions>
                <Viewbox Grid.Row="0">
                    <StackPanel Orientation="Vertical" x:Name="spEmulatorImage" VerticalAlignment="Center" Visibility="Hidden" />
                </Viewbox>
                <Viewbox Grid.Row="1">
                    <StackPanel Orientation="Vertical" x:Name="spNPlayers" VerticalAlignment="Center" Visibility="Hidden" />
                </Viewbox>
            </Grid>

        </Grid>

        
        

        
         <!--CUSTOM MESSAGE BOX-->
        <Grid Canvas.ZIndex="99"  Width="{Binding ElementName=canv, Path=ActualWidth}" Height="{Binding ElementName=canv, Path=ActualHeight}"
                    HorizontalAlignment="Center" VerticalAlignment="Stretch" Visibility="Hidden" x:Name="messageGrid">
            <Border  Background="White" CornerRadius="10" Padding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=150}" HorizontalAlignment="Center" VerticalAlignment="Center" >
                <Border Background="Black" CornerRadius="10" Padding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=150}">
                    <TextBlock x:Name="message" Style="{StaticResource MessageTextStyle}" Text="Empty Message"   />
                </Border>
            </Border>
        </Grid>
        
        <!--TRACK INFO POPUP-->
        <Grid Canvas.ZIndex="98"  Width="{Binding ElementName=canv, Path=ActualWidth}" Height="{Binding ElementName=canv, Path=ActualHeight}"
                    HorizontalAlignment="Center" VerticalAlignment="Stretch">
            <Border x:Name="TrackInfoBackground" Background="White" CornerRadius="4" Padding="1" Margin="5" Opacity="0" HorizontalAlignment="Right" VerticalAlignment="Top">
                <Border Background="Gray" CornerRadius="4" Padding="3">
                    <TextBlock x:Name="tbTrackInfo" Style="{StaticResource TrackInfoTextStyle}"     />
                </Border>
            </Border>
        </Grid>

        <!--POPUP MENU-->
        <Grid x:Name="popupMenuGrid" Canvas.ZIndex="90"  Width="{Binding ElementName=canv, Path=ActualWidth}" Height="{Binding ElementName=canv, Path=ActualHeight}"
                    HorizontalAlignment="Center" VerticalAlignment="Stretch" Visibility="Hidden">
            <Border  Background="White" CornerRadius="10" Padding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=150}" HorizontalAlignment="Center" VerticalAlignment="Center" >
                <Border Background="Black" CornerRadius="10" Padding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=150}">
                    <Canvas>
                    <ListBox x:Name="popupMenu" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                 ScrollViewer.VerticalScrollBarVisibility="Hidden" Background="Transparent" BorderBrush="Transparent" 
                             ItemContainerStyle="{StaticResource PopupMenuItemContainerStyle}"
                             ItemTemplate="{StaticResource PopupMenuItemTemplate}" />
                        
                    </Canvas>
                </Border>
            </Border>
        </Grid>

        <!-- PASSWORD -->
        <Grid Canvas.ZIndex="99"  Width="{Binding ElementName=canv, Path=ActualWidth}" Height="{Binding ElementName=canv, Path=ActualHeight}"
                    HorizontalAlignment="Center" VerticalAlignment="Stretch" Visibility="Hidden" x:Name="passwordGrid">
            <Border  Background="White" CornerRadius="10" Padding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=150}" HorizontalAlignment="Center" VerticalAlignment="Center" >
                <Border Background="Black" CornerRadius="10" Padding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualHeight, Converter={StaticResource fontSizeConverter}, ConverterParameter=150}">
                    <PasswordBox x:Name="pbPassword"  MaxLength="8" Style="{StaticResource MediumTextStyle}"></PasswordBox>
                </Border>
            </Border>
        </Grid>


        <!--GAME DETAILS-->
        <Grid x:Name="gameDetailsGrid" Background="Black" Canvas.ZIndex="90"
              Width="{Binding ElementName=canv, Path=ActualWidth}" Height="{Binding ElementName=canv, Path=ActualHeight}"
              HorizontalAlignment="Center" VerticalAlignment="Stretch" Visibility="Hidden"
              >

            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="25*" />
            </Grid.RowDefinitions>

            <Viewbox>
                <TextBlock  x:Name="tbName" Grid.Row="0" MaxHeight="40"  FontFamily="Consolas"  Foreground="White" VerticalAlignment="Center" />
            </Viewbox>


            <ListBox x:Name="Viewer" Grid.Row="1" BorderThickness="0" Background="Transparent"  
                  ItemTemplate="{StaticResource dtDetails}" 
                  ItemContainerStyle="{StaticResource GameDetailsContainerStyle}"
                  ItemsPanel="{StaticResource vDetails}" 
                     PreviewKeyDown="Viewer_PreviewKeyDown"
                  ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden" />


        </Grid>

        <!-- Place holder for music player never to be seen -->
        <MediaElement x:Name="meMusicPlayer" LoadedBehavior="Manual" Visibility="Collapsed" />
    </Canvas>
    
</local:MyWindow>
